<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 序号选择器，序号伪类 实际没那么常用*/
        /* :first-child         第一个子元素    .box p:first-child*   IE7/
        /* :last-child          最后一个子元素  .box p:last-child     IE9*/
        /* :nth-child(3)        第3个子元素     .box p:nth-child(3)   IE9*/
            /* :nth-child(an+b) 从b开始,每a个选一个 .box p:nth-child(3n+2) */
            /* :nth-child(2n)   等价于:nth-child(even) */
            /* :nth-child(2n+1) 等价于:nth-child(odd) */
        /* :nth-of-type(3)      第3个某类型子元素        IE9*/
        /* :nth-last-child(3)   倒数第3个子元素          IE9*/
        /* :nth-last-of-type(3) 倒数第3个某类型子元素     IE9*/

        div{border:1px solid black}

        .box1 p:first-child{color: red;}
        .box1 p:last-child{color:blue;}
        .box1 p:nth-child(3){color:purple}

        .box2 p:nth-child(2n+1){color:red;}
        .box2 p:nth-child(2n){color:blue;}

        .box3 p:nth-child(2n+3){color:red;}

        /* 不会变红，因为第四个不是p */
        .box4 p:nth-child(4){color:red;}
        /* 能变红，因为第一个就是p */
        .box4 p:nth-child(1){color:red;}
        /* 能变蓝，因为指定类型的第几个 */
        .box4 p:nth-of-type(3){color:blue;}
        .box4 h3:nth-of-type(1){color:blue;}

        .box5 p:nth-last-child(1){color: red;}
        
    </style>
</head>
<body>
    <div class="box1">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </div>
    <div class="box2">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </div>
    <div class="box3">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </div>
    <div class="box4">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <h3>h3 1</h3>
        <p>4</p>
        <p>5</p>
        <h3>h3 2</h3>
        <p>6</p>
    </div>
        <div class="box5">
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
            <p>6</p>
        </div>
</body>
</html>